<template>
  <!--  <span @click="goInfoPage">抽查详情</span>-->
  <div class="no-padding app-container">
    <lst-page-container>
      <template slot="query">
        <el-form :model="tableQueryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="企业名称" prop="enterpriseName">
            <el-input
                v-model="tableQueryParams.enterpriseName"
                placeholder="请输入企业名称"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="rowHandel">
        <el-button type="primary" icon="el-icon-plus"
                   size="mini" @click="handleAdd">新增抽查
        </el-button>
      </template>

      <template slot="table">
        <el-table  @sort-change="handleSortChange"  height="100%" v-loading="loading" :data="dataList">
          <el-table-column sortable="custom" label="企业名称" align="center" prop="enterpriseName"/>
          <el-table-column sortable="custom" label="抽查日期" align="center" prop="checkDate"/>
          <el-table-column sortable="custom" label="抽查隐患数量" align="center" prop="allCount"/>
          <el-table-column sortable="custom" label="整改完成隐患" align="center" prop="completedQuestionCount"/>
          <el-table-column sortable="custom" label="整改中隐患" align="center" prop="rectificationQuestionCount"/>
          <el-table-column sortable="custom" label="未整改隐患" align="center" prop="noRectificationQuestionCount"/>
          <el-table-column sortable="custom" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="goInfoPage(scope.row)"
              >隐患管理
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="tableQueryParams.pageNum"
            :limit.sync="tableQueryParams.pageSize"
            @pagination="getList"
        />
      </template>


    </lst-page-container>

    <el-drawer
        class="diy-draw"
        :title="title"
        :wrapperClosable="false"
        :visible.sync="open">
      <drawer-content>
        <template slot="body">
          <el-scrollbar>
            <el-form :rules="rules" :model="form" ref="form" size="small"
                     label-width="80px">
              <el-form-item class="column-item" label="抽查日期" prop="checkDate">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                v-model="form.checkDate" clearable style="width: 100%; "></el-date-picker>
              </el-form-item>
              <el-form-item class="column-item " label="抽查人员" prop="checkUserArr">
                <tag-list :remove-tag="true" :add-tag="true" v-model="form.checkUserArr"></tag-list>
              </el-form-item>
              <el-form-item class="column-item " label="抽查企业" prop="enterpriseSerial">
                <choose-enterprise v-model="form.enterpriseSerial" :inspect-info="inspectInfo"
                                   :handel-code="handelCode"></choose-enterprise>
              </el-form-item>
              <el-form-item class="column-item annex-box" label="依据文件" prop="fileIds">
                <template slot="label">
                  文件列表
                  <el-button class="file-upload-bt" icon="el-icon-refresh" size="mini"
                             @click="upload">上传文件
                  </el-button>
                </template>
                <show-file-list :file-list="fileList" @delFile="delFile"></show-file-list>
              </el-form-item>

            </el-form>
          </el-scrollbar>
        </template>
        <template slot="footer">
          <el-button type="primary" size="mini" @click="submitData">确定</el-button>
        </template>
      </drawer-content>
    </el-drawer>
  </div>
</template>

<script>
import {listPageMixins} from "@/mixins/listPageMixins";
import {subPageMixin} from "@/views/checkBusPage/mixins/subPageMixins";
import {
  addSpotCheck,
  delDefectInspect,
  getSpotCheckInfo,
  querySpotCheckList,
  updateSpotCheck
} from "@/api/checkPage/defectSpotCheck";
import {isArr} from "@/utils/arrayUtil";
import infoTable from "@/views/components/InfoTable/index.vue";
import TagList from "@/components/TagList/index.vue";
import ChooseEnterprise from "@/views/components/ChooseEnterprise/index.vue";
import ShowFileList from "@/components/ShowFileList/index.vue";

export default {
  mixins: [listPageMixins, subPageMixin],
  components: {
    infoTable,
    TagList,
    ChooseEnterprise,
    ShowFileList,
  },
  data() {
    return {
      modelName: '抽查',
      fileFiled: 'fileVos',
      // 查询参数
      queryParams: {
        // 整改状态
        enterpriseName: null,
      },
      otherQueryParam: {
        inspectId: this.inspectInfo.id
      },
      getListFun: querySpotCheckList,
      addFun: addSpotCheck,
      updateFun: updateSpotCheck,
      getInfoFun: getSpotCheckInfo,
      deleteFun: delDefectInspect,
      baseForm: {
        id: null,
        inspectId: this.inspectInfo.id,
        //  抽查日期
        checkDate: null,
        //  抽查人员数组
        checkUserArr: [],
        //  所属企业代码
        enterpriseSerial: null,
        //  附件
        fileIds: [],
      },
      rules: {
        enterpriseSerial: [
          {required: true, message: "所属企业不能为空", trigger: "blur"}
        ],
      },
    }
  },
  watch: {
    fileList(val) {
      this.form.fileIds = isArr(val) ? val.map(file => file.fileId) : [];
    }
  },
}
</script>

<style scoped>

</style>
